<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="积分商品详情" :border-bottom="false"></u-navbar>
		</view>
		<view class="goodsPic" v-if="bannerList">
			<u-swiper :list="bannerList" height="750" mode="number" border-radius="0" indicator-pos="bottomRight">
			</u-swiper>
		</view>
		<view class="goodsInfo container_B">
			<view class="name_collect jsbc">
				<view class="name">
					{{goodsInfo.name}}
				</view>
			</view>
			<view class="point">
				{{goodsInfo.point}}积分
			</view>
		</view>
		<view class="selectAddress container_B jsbc" @click="onShowAddress">
			<view class="title">
				选择地址
			</view>
			<view class="icon">
				<u-icon name="arrow-right" size="32" color="#666"></u-icon>
			</view>
		</view>
		<view class="container_B descBox">
			<view class="title">
				商品详情
			</view>
		</view>
		<view class="desc" v-if="goodsInfo.detail">
			<u-parse :content="goodsInfo.detail"></u-parse>
		</view>
		<view class="H100">

		</view>
		<addressPopup ref="address" :address-list="addressList" @select="onSelected" @edit="onEditAddress"
			@add="onNewAddress"></addressPopup>
		<view class="btns">
			<view class="btn" @click="pay">
				立即兑换
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getPointDetail,
		getAddressList,
		exchange
	} from '@/api/index.js'
	import addressPopup from "@/components/address-popup.vue"
	// import {
	// 	getMyInfo,
	// 	UpdateMyInfo
	// } from '@/api/index.js'
	import {
		tiao,
		toastC,
		toast,
		toastload,
		closeload
	} from '@/utils/common.js'
	import baseUrl from '@/config/config.js'
	export default {
		components: {
			addressPopup
		},
		data() {
			return {
				goodsId: "",
				goodsInfo: "",
				bannerList: [],
				more: "更多",
				addressList: [],
				address: "",
				addressId: ""
			};
		},
		onLoad(res) {
			console.log(res);
			this.goodsId = res.goods_id
			this.initData()
			this.initAddress()
		},
		methods: {
			initData() {
				toastload()
				this.user_id = uni.getStorageSync("user_id") || ""
				getPointDetail(this.goodsId).then(res => {
					console.log("商品详情", res);
					this.goodsInfo = res.data
					this.bannerList = res.data.images_format
					closeload()

				})
			},
			initAddress() {
				let self = this;
				getAddressList().then(res => {
					console.log("获取地址", res);
					self.addressList = res.data;
				})
			},
			onShowAddress() {
				this.$refs.address.open();
			},
			onNewAddress() {
				// this.$utils.jump('/other/add-address/add-address?type=0');
				uni.navigateTo({
					url: '/other/add-address/add-address?type=0'
				})
			},
			onSelected(item) {
				console.log(item);
				this.address = item;
				this.addressId = item.id;
			},
			onEditAddress(item) {
				// this.$utils.jump(');
				uni.navigateTo({
					url: '/other/add-address/add-address?type=1&id=' + item.id
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/other/delivery-address/delivery-address'
				})
			},
			pay(){
				let self = this
				if(!this.addressId){
					toast("请选择地址")
					return
				}
				uni.showModal({
					title:`是否兑换${this.goodsInfo.name}`,
					success(res) {
						if(res.confirm){
							exchange({
								point_goods_id:self.goodsId,
								number:1,
								delivery_address_id:self.addressId
							}).then(res=>{
								if(res.code==200){
									toastC('兑换成功')
					
								}
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.point {
		margin-top: 15rpx;
	}

	.btns {
		position: fixed;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		bottom: 0;
		box-sizing: border-box;
		padding: 13rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.btn {
			background: #F5CE31;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			border-radius: 40rpx;
			color: #fff;
			padding: 0 20rpx;
		}

		.parseBtn {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.descBox {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.desc {
		margin-top: 20rpx;
		text-align: center;
	}

	.listBox {
		.item {
			margin-top: 20rpx;

			.name_time {
				height: 64rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
			}

			.name_time .name {
				font-size: 26rpx;
				color: #333;
			}

			.name_time .time {
				font-size: 22rpx;
				color: #666;
			}
		}

		.bottom {
			width: 550rpx;
			margin: 20rpx auto;
		}
	}

	.noData {
		text-align: center;
		margin-top: 30rpx;
		color: #F5CE31;
	}
</style>